<template>
    <div class="viality-chart">
		  <chart :options="vialitydata" ref="vialitydata" auto-resize/>
    </div>
</template>

<script>
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import 'echarts/lib/component/dataZoom'
let echarts1 = require("echarts/lib/echarts");
export default {
  name: 'viality',
  components: {
    chart: Echarts
  },
  props: {
    chartData: Object
  },
  data() {
    return {
      items: {
      },
      vialitydata: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }  
          },
          xAxis: {
              data: [],
              name: '',
              axisTick : { //取消刻度线
      　　　　　　show : false
      　　　 },
            
      　　　 axisLabel:{//字体样式
      　　　　　　show: false,
      　　　　　　textStyle: {
      　　　　　　　　color:'rgba(255,255,255,0)',
      　　　　　　　　fontWeight : 200 ,
      　　　　　　　　fontSize : 0 //文字的字体大小
      　　　　　　}
      　　　　},
              axisLine: {
                  onZero: true,
                  lineStyle: {     
      　　　　　　　　type: 'solid',
      　　　　　　　　color: '#eee',//线的颜色
      　　　　　　　　width:'1'//坐标线的宽度
      　　　　　　}   
              },
              splitLine: {show: false},
              splitArea: {show: false}
          },
          yAxis: {
            type: "value",
              inverse: false,
              axisTick : { //取消刻度线
      　　　　　　show : false
      　　　 },
            axisLine: {//y轴线的样式
      　　　　　　lineStyle: {
      　　　　　　　　type: 'solid',
      　　　　　　　　color: '#eee',//线的颜色
      　　　　　　　　width:'0'//坐标线的宽度
      　　　　　　}
      　　　 },
      　　　 axisLabel:{//字体样式
      　　　　　　show: false,
      　　　　　　textStyle: {
      　　　　　　　　color:'#9B9B9B',
      　　　　　　　　fontWeight : 300 ,
      　　　　　　　　fontSize : 13 //文字的字体大小
      　　　　　　}
      　　　　},
      　　　 splitLine: {show: false},
              splitArea: {show: false}
          },
          grid: {
              left: '2%',
              right: '2%',
              top: 10,
              bottom: 17,
              containLabel: true
          },
          series: [
              {
                  name: '当日唤醒',
                  type: 'bar',
                  stack: 'one',
                  itemStyle: {
                    normal: {
                      color: function(params){
                          return new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: "#5480FE"},
                            {offset: 1, color: "#2BB1FB"}
                          ]);
                      },
                      barBorderRadius:[0,0,0,0]
                    }
                  },
                  data: []
              },
              {
                  name: '当日沉睡',
                  type: 'bar',
                  stack: 'one',
                  itemStyle: {
                    normal: {
                      color: function(params){
                          return new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: "#FF80B9"},
                            {offset: 1, color: "#E152D2"}
                          ]);
                      },
                      barBorderRadius:[0,0,0,0]
                    }
                  },
                  data: []
              }
          ]
      }
    };
  },
  created() {},
  methods: {
    setLine() {
      let self = this;
        if (this.items.xAxisData.length) {
          if(this.items.xAxisData.length >21){
            this.vialitydata["dataZoom"] = [
              {
                type: "inside",
                startValue: 0,
                endValue: 6,
                minValueSpan: 1,
                maxValueSpan: 6,
                zoomOnMouseWheel: false,
                moveOnMouseWheel: false,
                moveOnMouseMove: true
              },
              {
                type: "slider",
                show: true,
                startValue: 0,
                endValue: 6,
                height: 15,
                handleSize: 22,
                showDataShadow: false,
                bottom: 0,
                textStyle: {
                  color: "transparent"
                },
                fillerColor: "#eee",
                borderColor: "#eee",
                handleStyle: {
                  color: "#c8c8c8"
                }
              }
            ];
            this.vialitydata.yAxis['axisLine'] = {//y轴线的样式
    　　　　　　lineStyle: {
    　　　　　　　　type: 'solid',
    　　　　　　　　color: '#eee',//线的颜色
    　　　　　　　　width:'1'//坐标线的宽度
    　　　　　　}
      　　　 };
            this.vialitydata.yAxis['axisLabel'] = {//字体样式
      　　　　　　show: true,
      　　　　　　textStyle: {
      　　　　　　　　color:'#9B9B9B',
      　　　　　　　　fontWeight : 300 ,
      　　　　　　　　fontSize : 13 //文字的字体大小
      　　　　　　}
      　　　　};
            this.vialitydata.series[0].barWidth = 20; // 柱形的宽度
            this.vialitydata.series[1].barWidth = 20; // 柱形的宽度
            this.vialitydata.series[0].barCategoryGap = 15; // 柱形的间距
            this.vialitydata.series[1].barCategoryGap = 15; // 柱形的间距 
          }else{

          }
          this.vialitydata.xAxis.data = [];
          this.vialitydata.series[0].data = [];
          this.vialitydata.series[1].data = [];

          this.vialitydata.xAxis.data = this.items.xAxisData;
          this.vialitydata.series[0].data = this.items.bar1;
          this.vialitydata.series[1].data = this.items.bar2;
        } else {
          this.$refs.vialitydata.clear();
        }
    }
  },
  watch: {
      chartData:{
        immediate: true,
        handler(val){
          this.items = val;
          this.$nextTick(() => {
                this.setLine();
           });
        }
      }
  },
  mounted () {
    this.items = this.chartData;
    this.$nextTick(() => {
      this.setLine();
    })
  }
};
</script>

<style lang="scss">
.viality-chart {
  height: 207px;
  margin: 0;

  .echarts {
    width: 100%;
    height: 100%;
  }
  .bold {
    font-weight: bold;
    line-height: 18px;
  }
}
</style>
